<template>
  <view>
    <scroll-view
      scroll-y
      enable-flex
      @scrolltolower="handleToLower"
    >
      <view
        class="img_wrap"
        v-for="item in imgList"
        :key="item.id"
        @click="handleGoVideo(item)"
      >
        <image
          mode="widthFix"
          :src="item.img"
        ></image>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      tem: '',
      imgList: [],
      // 是否还有更多
      hasMore: true

    }

  },
  // 设置允许父组件传递过来的参数urlObj
  props: ["urlObj"],

  mounted () {
    this.getList()
  },
  watch: {
    // 当urlObj变化时触发
    urlObj () {
      // 当选项卡切换时清空imgList中的数据
      this.imgList = [],
        // 重置状态
        this.hasMore = true

      this.getList()
    }

  },
  methods: {
    async getList () {
      const res = await this.$request({ url: this.urlObj.url, data: this.urlObj.params })
      if (res.videowp.length !== this.urlObj.params.limit) {
        this.hasMore = false
        uni.showToast({ title: '没有更多数据了', icon: 'none' })
      }
      this.imgList = [...this.imgList, ...res.videowp]
    },
    // 滚动区域触底事件
    handleToLower () {
      if (this.hasMore) {
        this.urlObj.params.skip += this.urlObj.params.limit
        this.getList()
      }
      else {
        // 弹框提示
        uni.showToast({ title: '没有更多数据了', icon: 'none' })
      }
    },
    // 点击图片列表跳转到详情页
    handleGoVideo (item) {
      console.log('yes');
      // 保存点击项数据
      getApp().globalData.video = item
      // 手动跳转到视频详情页
      uni.navigateTo({ url: '/pages/videoPlay/index' })

    }
  },




}
</script>

<style lang='scss' scope>
scroll-view {
  height: calc(100vh - 40px);
  display: flex;
  flex-wrap: wrap;
  .img_wrap {
    width: 33.33vw;
    border: 5rpx solid #ffffff;
    image {
      width: 100%;
    }
  }
}
</style>